<template>
	<view class="content">
		<image class="logo" src="/static/SnakesLogo.png"></image>
		<text class="text">当前关：{{ levelConfigure.gameLevels }}</text>
		<view class="bottomArea">
			<button class="btn" @click="startGame()">开始游戏</button>
			<button class="btn" @click="rankings()">排行榜</button>
		</view>
	</view>
</template>

<script>
	import gameLevel from '@/pages/level/levels.js'
	export default {
		data() {
			return {
				title: 'Hello',
				levelConfigure: {
					gameLevels: 1,
					initialSpeed: 3,
					foodNumber: 10
				},
			}
		},
		onShow() {
			let nowLevel = 0
			if (uni.getStorageSync('level')) {
				nowLevel = uni.getStorageSync('level') - 1;
			}
			this.levelConfigure = gameLevel[nowLevel]
		},
		methods: {
			startGame() {
				uni.navigateTo({
					url: '/pages/level/level'
				})
			},
			rankings() {
				uni.showToast({
					title: "暂未开放",
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		/* height: 200rpx; */
		/* width: 200rpx; */
		/* margin-top: 200rpx; */
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10rpx;
	}

	.text {
		color: #b4b4b4;
	}

	.bottomArea {
		width: 100%;
		height: 300rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.btn {
		width: 80%;
		height: 100rpx;
		background-color: aliceblue;
		color: #ffcb3d;
		line-height: 100rpx;
	}
</style>